<template>
  <div class="mainHeader">
    <div class=" space-between">
      <div class="logo">
        <img src="/static/images/logo.png" alt="">
      </div>
      <div class="icon-nav align-center" @click="isShowSideBar = true">
        <img src="/static/images/icon/icon-header-btn.fw.png" alt="">
      </div>
    </div>
    <div class="line">

    </div>
    <div :class="['right-side-bar space-between', {'side-active': isShowSideBar}]" id="right-side-Bar">
      <!--右侧推出-->
      <div class="cover-bg" @click="isShowSideBar = false">

      </div>
      <div class="right">
        <div class="info flex-start">
          <div class="cover">
            <img src="" alt="">
          </div>
          <span class="name font-over">名字</span>
        </div>
        <ul>
          <li>
            <router-link to="">
              首页
            </router-link>
          </li>
          <li>
            <router-link to="">
              项目类型
            </router-link>
          </li>
          <li>
            <router-link to="">
              关于
            </router-link>
          </li>
          <li>
            <router-link to="">
              联系我们
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "mainHeader",
    data() {
      return {
        isShowSideBar: false
      }
    },
    created() {
      
    },
    mounted() {
      let ww = document.documentElement.clientWidth || document.body.clientWidth;
      let hh = document.documentElement.clientHeight || document.body.clientHeight;
      var sideBar = document.getElementById("right-side-Bar");
      sideBar.style.width = ww +'px';
      sideBar.style.height = hh +'px';
    },
    methods: {

    }
  }
</script>

<style lang="less" scoped>
.promise(@css, @args) {
  @{css}: @args;
  -webkit-@{css}: @args;
  -moz-@{css}: @args;
  -ms-@{css}: @args;
  -o-@{css}: @args;
}
.mainHeader{
  background: #fff;
  .space-between{
    padding: 0 20/37.5rem;
    height: 103/37.5rem;
    line-height: 103/37.5rem;
    .logo{
      height: 80/37.5rem;
      margin-top: 11/37.5rem;
      img{
        height: 100%;
      }
    }
    .icon-nav{
      height: 100%;
      width: 100/37.5rem;
      text-align: center;
      img{
        width: 50/37.5rem;
      }
    }
  }
  .line{
    width: 100%;
    height: 12/37.5rem;
    background: #eee;
  }
}
.right-side-bar{
  position: fixed;
  top: 0;
  left: 102%;
  width: 100%;
  z-index: 99999999999;
  background: rgba(0,0,0,0.4);
  .promise(transition, all 0.3s);
  .cover-bg{
    width: 60%;
    height: 100%;
  }
  .right{
    width: 40%;
    height: 100%;
    background: #333;
    .info{
      padding-top: 2.4rem;
      padding-bottom: 0.8rem;
      border-bottom: 1px solid #ddd;
      .cover{
        margin: 0 0.4rem;
        width: 70/37.5rem;
        height: 70/37.5rem;
        overflow: hidden;
        position: relative;
        border: 1px solid #fff;
        .promise(border-radius, 50%);
        img{
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          width: 100%;
        }
      }
      .name{
        font-size: 24/37.5rem;
        color: #fff;
        line-height: 3;
        width: 140/37.5rem;
      }
    }
    ul{
          text-align: center;
          margin-top: 0.5rem;
      li{
          text-align: center;
        a{
          padding: 0.5rem 0 ;
          display: block;
          color: #fff;
          text-align: center;
          line-height: 40/37.5rem;
          font-size: 28/37.5rem;
        }
      }
    }
  }
  &.side-active{
    left: 0;
  }
}
</style>